  <div class="modal fade" id="modal-oauth" tabindex="-1" role="dialog" aria-labelledby="modal-oauth" aria-hidden="true">
    <form id="form-oauth">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" data-i18n="modalOAuthTitle">OAuth 1.0</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            
              <!-- Nav tabs -->
              <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item">
                  <a class="nav-link active" data-toggle="tab" href="#oauth-signature" role="tab" data-i18n="modalOAuthSign">Signature for this request</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" data-toggle="tab" href="#oauth-setting" role="tab" data-i18n="modalOAuthSetting">Settings</a>
                </li>
              </ul>
              
              <!-- Tab panes -->
              <div class="tab-content">
                <div class="tab-pane container active" id="oauth-signature" role="tabpanel">
                  <!-- oauth-signature -->
                    <div class="form-group row m-t-md required">
                      <label for="oauth-consumer-key" class="col-sm-3 form-control-label" data-i18n="modalOAuthConsumerKey">Consumer key</label>
                      <div class="col-sm-9">
                        <input type="text" class="form-control" id="oauth-consumer-key" placeholder="Consumer key">
                        <small id="oauth-consumer-key-helper" class="form-text text-danger helper" style="display: none" data-i18n="modalOAuthConsumerKeyHelper">Consumer key must be filled out</small>
                      </div>
                    </div>
                    <div class="form-group row required">
                      <label for="oauth-shared-secret" class="col-sm-3 form-control-label" data-i18n="modalOAuthSharedSecret">Shared secret</label>
                      <div class="col-sm-9">
                        <input type="text" class="form-control" id="oauth-shared-secret" placeholder="Shared secret">
                        <small id="oauth-shared-secret-helper" class="form-text text-danger helper" style="display: none" data-i18n="modalOAuthSharedSecretHelper">Shared secret must be filled out</small>
                      </div>
                    </div>
                    <div class="form-group row">
                      <label for="oauth-access-token" class="col-sm-3 col-form-label" data-i18n="modalOAuthAcessToken">Access token</label>
                      <div class="col-sm-9">
                        <input type="text" class="form-control" id="oauth-access-token" placeholder="Access token">
                      </div>
                    </div>
                    <div class="form-group row">
                      <label for="oauth-access-token-secret" class="col-sm-3 col-form-label" data-i18n="modalOAuthAcessTokenSecret">Access token secret</label>
                      <div class="col-sm-9">
                        <input type="text" class="form-control" id="oauth-access-token-secret" placeholder="Access token secret">
                      </div>
                    </div>
                    <div class="form-group row m-b-xs">
                      <label for="oauth-parameter-transmission" class="col-sm-3 col-form-label" data-i18n="modalOAuthPT">Parameter transmission</label>
                      <div class="col-sm-9" style="line-height: 34px;">
                        <div class="form-check abc-radio d-inline-block m-b-none m-r-md">
                          <input class="form-check-input" type="radio" name="oauth-parameter-transmission" id="oauth-parameter-transmission-header" value="header" checked>
                          <label class="form-check-label" for="oauth-parameter-transmission-header" data-i18n="modalOAuthPTHeader">
                            Authorization header
                          </label>
                        </div>
                        <div class="form-check abc-radio d-inline-block m-b-none m-r-md">
                          <input class="form-check-input" type="radio" name="oauth-parameter-transmission" id="oauth-parameter-transmission-query" value="query">
                          <label class="form-check-label" for="oauth-parameter-transmission-query" data-i18n="modalOAuthPTQS">
                            Request query string
                          </label>
                        </div>
                      </div>
                    </div>
                  <!-- oauth-signature -->
                </div>
                <div class="tab-pane container" id="oauth-setting" role="tabpanel">
                  <!-- oauth-settings -->
                  <div class="form-group row m-t-md">
                    <label for="oauth-signature-method" class="col-sm-3 col-form-label" data-i18n="modalOAuthMethod">Signature method</label>
                    <div class="col-sm-9" style="line-height: 34px;">
                      <div class="form-check abc-radio d-inline-block m-b-none m-r-md">
                        <input class="form-check-input" type="radio" name="oauth-signature-method" id="oauth-signature-plaintext" value="PLAINTEXT">
                        <label class="form-check-label" for="oauth-signature-plaintext">
                          PLAINTEXT
                        </label>
                      </div>
                      <div class="form-check abc-radio d-inline-block m-b-none m-r-md">
                        <input class="form-check-input" type="radio" name="oauth-signature-method" id="oauth-signature-hmac-sha1" value="HMAC-SHA1"
                          checked>
                        <label class="form-check-label" for="oauth-signature-hmac-sha1">
                          HMAC-SHA1
                        </label>
                      </div>
                      <div class="form-check abc-radio d-inline-block m-b-none m-r-md">
                        <input class="form-check-input" type="radio" name="oauth-signature-method" id="oauth-signature-hmac-sha256" value="HMAC-SHA256"
                          checked>
                        <label class="form-check-label" for="oauth-signature-hmac-sha256">
                          HMAC-SHA256
                        </label>
                      </div>
                    </div>
                  </div>
                  <div class="form-group row m-t-md">
                    <label for="oauth-consumer-key" class="col-sm-3 col-form-label" data-i18n="modalOAuthVersion">OAuth version</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" id="oauth-version" placeholder="1.0" value="1.0" readonly>
                    </div>
                  </div>
                  <div class="form-group row">
                    <label for="oauth-consumer-secret" class="col-sm-3 col-form-label" data-i18n="modalOAuthRealm">Realm</label>
                    <div class="col-sm-9">
                      <div class="input-group">
                        <input type="text" class="form-control" id="oauth-realm" placeholder="Realm, e.g. http://sp.example.com" readonly>
                        <span class="input-group-addon d-inline-block abc-checkbox abc-checkbox-dark">
                          <input type="checkbox" id="oauth-realm-auto" checked="true" disabled="true" aria-label="Checkbox for following text input"> 
                          <label for="oauth-realm-auto" data-i18n="modalAuto">
                            Auto
                          </label>
                        </span>
                        <span class="input-group-addon d-inline-block abc-checkbox abc-checkbox-dark">
                          <input type="checkbox" id="oauth-realm-disabled" checked="true" aria-label="Checkbox for following text input">
                          <label for="oauth-realm-disabled" data-i18n="modalDisabled">
                            Disabled
                          </label>
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="form-group row">
                    <label for="oauth-access-token" class="col-sm-3 col-form-label" data-i18n="modalOAuthNonce">OAuth nonce</label>
                    <div class="col-sm-9">
                      <div class="input-group">
                        <input type="text" class="form-control" id="oauth-nonce" placeholder="OAuth nonce" readonly>
                        <span class="input-group-addon d-inline-block abc-checkbox abc-checkbox-dark">
                          <input type="checkbox" id="oauth-nonce-auto" checked="true" aria-label="Checkbox for following text input">
                          <label for="oauth-nonce-auto" data-i18n="modalAuto">
                            Auto
                          </label>
                        </span>
                      </div>                    
                    </div>
                  </div>
                  <div class="form-group row m-b-xs">
                    <label for="oauth-access-token-secret" class="col-sm-3 col-form-label" data-i18n="modalOAuthTimestamp">OAuth timestamp</label>
                    <div class="col-sm-9">
                      <div class="input-group">
                        <input type="number" step="1" class="form-control" id="oauth-timestamp" placeholder="OAuth timestamp" readonly>
                        <span class="input-group-addon d-inline-block abc-checkbox abc-checkbox-dark">
                          <input type="checkbox" id="oauth-timestamp-auto" checked="true" aria-label="Checkbox for following text input">
                          <label for="oauth-timestamp-auto" data-i18n="modalAuto">
                            Auto
                          </label>
                        </span>
                      </div>
                      <small id="oauth-timestamp-help" class="form-text text-muted" style="display: none;"></small>
                    </div>
                  </div>
                  <!-- oauth-settings -->
                </div>
              </div>
            
          </div>
          <div class="modal-footer">
            <div class="form-check abc-checkbox abc-checkbox-danger">
              <input class="form-check-input" id="save-oauth" type="checkbox">
              <label class="form-check-label" for="save-oauth" data-i18n="modalOAuthRemember">
                Remember this signature
              </label>
            </div>
            <button type="button" class="btn btn-secondary" data-dismiss="modal" data-i18n="modalClose">Close</button>
            <button type="submit" class="btn btn-primary btn-oauth-okay" data-i18n="modalOkay">Okay</button>
          </div>
        </div>
      </div>
    </form>
  </div>
  <div class="modal fade" id="modal-oauth-preview" tabindex="-1" role="dialog" aria-labelledby="modal-oauth-preview" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <form class="form-request-header">
        <div class="modal-content">
          <div class="modal-body">
            <h5 data-i18n="modalOauthPreviewTitle">OAuth Parameters</h5>
            <table class="table table-hover table-bordered m-t-md">
              <thead class="thead-inverse">
                <tr>
                  <th>#</th>
                  <th data-i18n="modalOauthPreviewName">Name</th>
                  <th data-i18n="modalOauthPreviewValue">Value</th>
                </tr>
              </thead>
              <tbody>
              </tbody>
            </table>
            <h5 class="m-t-lg" data-i18n="modalOauthPreviewHeader">OAuth header</h5>
            <div class="card card-outline-primary text-xs-center m-t-md">
              <div class="card-block">
                <blockquote class="card-blockquote oauth-preview-header">
                  <code>Authorization:</code><code class="name"></code>
                </blockquote>
              </div>
            </div>
            <h5 class="m-t-lg" data-i18n="modalOauthPreviewSignedUrl">OAuth signed URL</h5>
            <div class="card card-outline-primary text-xs-center m-t-md">
              <div class="card-block">
                <blockquote class="card-blockquote oauth-preview-url">
                  <code></code>
                </blockquote>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal" data-i18n="modalClose">Close</button>
            <button type="button" class="btn btn-primary btn-refresh"><i class="fa fa-refresh"></i> <span data-i18n="modalRefresh">Refresh</span></button>
          </div>
        </div>
      </form>
    </div>
  </div>